<template>
  <div class="table-ctrl-body">
    <!--按钮组-->
    <div class="Btns-ctrl-body">

      <!--高级搜索-->
      <SearchPublic
        :searchObj="searchObj"
        @searchParams="searchParamsFn"
      ></SearchPublic>

<!--      <div class="search-ctrl f-l">
        <form style="height: 100%;">
          <input placeholder="根据三圈名称查询" @keyup="defaultLoad($event)" v-model="searchContent" class="search-text">
          &lt;!&ndash;   <button class="search-btn btn btn-default" type="button">更多条件</button>&ndash;&gt;
          <button class="search-btn btn btn-info" @click="searchDotResource" type="button">搜索</button>
        </form>
      </div>-->

      <div class="btns f-r">
        <button type="button" class="btn btn-info" @click="toggleAddModal">新增</button>
        <button type="button" class="btn btn-warning" @click="toggleRevampModal">修改</button>
        <button type="button" class="btn btn-danger" @click="deleteFn">删除</button>
        <!--      <button type="button" class="btn btn-success" @click="isDetailsModalFn">详情</button>-->
        <!--   <button type="button" class="btn btn-info">添加重点人关系</button>
           <button type="button" class="btn btn-danger">删除重点人关系</button>-->
      </div>
    </div>
    <!--按钮组闭合-->
    <!--表格组-->
    <div class="table-ctrl">
      <!--表格头-->
      <!--{{treeTableRow}}-->
      <div class="table-header">
        <table class="table-default">
          <thead>
          <tr>
            <th v-for="ths in tableHeader">
              {{ths.value}}
            </th>
          </tr>
          </thead>
        </table>
      </div>
      <!--表格中部-->
      <div class="table-overflowX">
        <table class="table-default">
          <tbody>
          <tr
            v-for="(trs,index) in tableRow.list"
            @click="selectRow(trs,index)"
            :class="{active: index === isActive}"
          >
            <td v-for="tds in tableHeader">
              {{trs[tds.key]}}
            </td>
          </tr>
          </tbody>
        </table>
      </div>

      <!--表格翻页-->
      <Pages
        v-show="tableRow.total !== 0"
        v-if="tableRow"
        :showItem="10"
        :pageSize="20"
        :allDataSum="tableRow.total"
        :allpage="(Math.ceil(tableRow.total/20))"
        @current-change="tablePageData"
      ></Pages>

    </div>

    <!--新增-->
    <AddThreeCircleModal
      :addModalObj="addModalObj"
      @closeModal="toggleAddModal"
    ></AddThreeCircleModal>

    <!--修改-->
    <RevampThreeCircleModal
      :RevampModalObj="RevampModalObj"
      :selectRowId="selectRowId"
      @closeRevampModal="toggleRevampModal"
    ></RevampThreeCircleModal>

  </div>
</template>

<script>
    import Pages from "../../sudoku/atom/pages.vue"
    import AddThreeCircleModal from "./AddThreeCircleModal"
    import RevampThreeCircleModal from "./RevampThreeCircleModal"
    import SearchPublic from "../../publicTemplate/search/SearchPublic"
    export default {
        name: "ThreeCircleTable",
        data(){
          return{
            isActive:-1,
            selectRowId:"",
            tableHeader:[
              {"key":"NAME","value":"名称"},
              {"key":"DEPARTMENT_PARSE","value":"所属单位"},
              {"key":"GRADE_PARSE","value":"等级"},
              {"key":"CLASSIFICATION_PARSE","value":"分类"},
              {"key":"CREATE_USER_PARSE","value":"新增人"},
              {"key":"CREATE_TIME_PARSE","value":"更新时间"},
              {"key":"COMMENTS","value":"备注"},
            ],
            tableRow:[],
            tableRowParams : {
              pageIndex:"1", //当前页
              pageSize:"20", //数量
            },
            addModalObj:{
              isShow:false,
              upUserId:""
            },
            RevampModalObj:{
              isShow:false,
              upUserId:""
            },
            searchContent:"", //搜索设备号
            isDetailsModal:false, //是否为查看界面
            imgSrc:"",
            areaList:[],
            params : {
              "columns": ["*"],
              "conditions": [],
              "dataTypeCode": "pointresource",
              "pageIndex": 1,
              "pageSize": 20,
              "tableName": "T_RES_THREE_AREAS",
              "sorters":[
                {
                  "order": "asc",
                  "sortField": "CREATE_TIME"
                }
              ]
            },
            mapCode:null,
            searchObj:{
              condition:[
                {"title":"三圈名称","key":"NAME","value":'','type':'text','data':''},
                {"title":"所属单位","key":"DEPARTMENT","value":'','type':'select','data':''},
                {"title":"等级","key":"GRADE","value":'','type':'select','data':[
                    {'key':'选择等级','value':""},
                    {'key':'一级','value':"1"},
                    {'key':'二级','value':"2"},
                    {'key':'三级','value':"3"},
                  ]
                },
                {"title":"分类","key":"CLASSIFICATION","value":'','type':'select','data':[
                    {'key':'选择分类','value':""},
                    {'key':'医圈','value':"YQ"},
                    {'key':'商圈','value':"SQ"},
                    {'key':'校圈','value':"XQ"},
                  ]
                },
              ],
              htmlType:"searchDefaultPublic",
            },
          }
        },
        components:{
          Pages,
          AddThreeCircleModal,
          RevampThreeCircleModal,
          SearchPublic
        },
        mounted(){
          this.getAreaList();
        },
        methods:{
          //获取所属地区
          getAreaList(){
            //POST /dictionary/{key}
            this.$axios.post(this.DotCtrl+"/mapDictionaryRelation/getRelationInfoList",{
              "parentMenuCode": "MAP_SSDW",
            })
              .then(res=>{
                //console.log(res);
                let success = res.data;
                let list = [];
                for( let i=0;i<success.length;i++ ){
                  success[i].targetMenuCode = success[i].targetMenuCode.split("_")[1];
                  list.push(success[i]);
                }
                this.searchObj.condition[1].data = this.JPtool.searchSelectPublicObj("请选择单位","name","targetMenuCode",list);
                this.areaList = this.JPtool.searchSelectPublicObj("无","name","targetMenuCode",list);
                //console.log(this.areaList);
                this.tableRowAjax();
              })
              .catch(err=>{
                //console.log(err);
              })
          },
          //加载表格
          tableRowAjax(){
            this.clearSelect();
            //POST /base/query/page
            this.$axios.post(this.HOST+"/base/query/page",this.params)
              .then((data)=>{
                //console.log(data);
                this.tableRow = data.data.data;
                for( let i=0;i<this.tableRow.list.length;i++ ){
                  for( let k=0;k<this.areaList.length;k++ ){
                    if( this.tableRow.list[i].DISTRICT === this.areaList[k].value ){
                      this.tableRow.list[i].DISTRICT_PARSE = this.areaList[k].key;
                    }
                  }
                }
                //console.log(this.tableRow);
              })
              .catch((err)=>{
                //console.log(err);
              })
          },
          //翻页加载
          tablePageData(page){
            this.params.pageIndex = page;
            this.tableRowAjax();
            ////console.log(page);
          },
          //新增弹窗显示与隐藏
          toggleAddModal(){
            this.addModalObj.isShow = !this.addModalObj.isShow;
            if( this.addModalObj.isShow === false ){
              //重新加载表格
              this.tableRowAjax();
            }
          },
          //修改弹窗显示与隐藏
          toggleRevampModal(){
            if( this.selectRowId !=="" ){
              this.RevampModalObj.isShow = !this.RevampModalObj.isShow;
              this.isDetailsModal = false;
            }else{
              this.s_alert("请选择需要修改的三圈！");
            }
            if( this.RevampModalObj.isShow === false ){
              //重新加载表格
              this.tableRowAjax();
            }
          },
          //搜索功能
          searchDotResource(){
            if( this.searchContent === "" ){
              this.params.conditions = [];
            }else{
              this.params.conditions = [
                {"field":"NAME","symbol":"like","value":"%"+this.searchContent+"%"}
              ];
            }
            this.tableRowAjax();
          },
          //选择行
          selectRow(obj,index){
            //console.log(obj);
            this.selectRowId = obj.ID;
            this.isActive = index;
            this.mapCode = obj.MAP_CODE
          },
          //查看详情
          isDetailsModalFn(){
            if( this.selectRowId !=="" ){
              this.RevampModalObj.isShow = !this.RevampModalObj.isShow;
              this.isDetailsModal = true;
            }else{
              this.s_alert("请选择需要查看的三圈！");
            }
          },
          //默认加载
          defaultLoad(ev){
            if( ev.keyCode === 8 ){
              if( this.searchContent === "" ){
                this.searchDotResource();
              }
            }
          },
          //删除
          deleteFn(){
            if( this.selectRowId !=="" ){
              let msg = confirm("请问是否删除该三圈？");
              if( msg ){

                //删除地图缓存
                this.$axios({
                  method: 'post',
                  url: mapFeatureServer + '1/deleteFeatures', // 1 线 2 圈
                  data: 'objectIds='+ this.mapCode +'&where=&geometry=&geometryType=esriGeometryEnvelope&inSR=&spatialRel=esriSpatialRelIntersects&gdbVersion=&rollbackOnFailure=true&f=pjson',
                  headers: {"Content-Type": "application/x-www-form-urlencoded"}
                }).then( res => {
                  //console.log(res);
                });

                //DELETE /base/remove
                let params = {
                  "conditions": [
                    {
                      "field": "ID",
                      "symbol": "=",
                      "value": this.selectRowId
                    }
                  ],
                  "dataTypeCode": "pointresource",
                  "tableName": "T_RES_THREE_AREAS"
                };
                this.$axios.delete(this.HOST+"/base/remove",{
                  data:params
                })
                  .then((data)=>{
                    //console.log(data);
                    this.s_alert("删除成功！");
                    this.s_logwrite("点位信息管理-三圈管理","删除三圈");
                    this.tableRowAjax();
                  })
                  .catch((err)=>{
                    this.s_alert("删除失败！");
                    //console.log(err);
                  })
              }
            }else{
              this.s_alert("请选择需要删除的三圈！");
            }
          },
          //搜索
          searchParamsFn(searchParams){
            //console.log(this.searchObj.condition);
            let searchParamsArr = [];
            for( let i=0;i<this.searchObj.condition.length;i++ ){
              if( this.searchObj.condition[i].value && this.searchObj.condition[i].value !=="" ){
                if( this.searchObj.condition[i].key === "DEPARTMENT" ){
                  searchParamsArr.push(
                    {"field": this.searchObj.condition[i].key,"symbol":"=","value":this.searchObj.condition[i].value}
                  )
                }else{
                  searchParamsArr.push(
                    {"field": this.searchObj.condition[i].key,"symbol":"like","value":"%"+this.searchObj.condition[i].value+"%"}
                  )
                }
              }
            }
            this.params.conditions = searchParamsArr;
            this.tableRowAjax();
          },
          //清除选择
          clearSelect(){
            this.isActive=-1;
            this.selectRowId="";
          }
        }
    }
</script>

<style scoped>

</style>
